<script src="js/jquery/jquery.tools.min.js"></script>
<script src="js/scrollable.js"></script>

<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>

<style>
	/* some styling for triggers */
	#triggers {
		text-align:center;
	}

	#triggers img {
		cursor:pointer;
		margin:0 5px;
		background-color:#fff;
		border:1px solid #ccc;
		padding:2px;

		-moz-border-radius:4px;
		-webkit-border-radius:4px;

	}



	/* styling for elements inside overlay */
	.details {
		position:absolute;
		top:15px;
		right:15px;
		font-size:11px;
		color:#fff;
		width:150px;
	}

	.details h3 {
		color:#aba;
		font-size:15px;
		margin:0 0 -10px 0;
	}
</style>

<script>
    // execute your scripts when the DOM is ready. this is mostly a good habit
    $(function() {

        // initialize scrollable
        $(".scrollable").scrollable({ circular: true });

    });


</script>

<script>
    // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
    $(document).ready(function() {

        $("img[rel]").overlay({
            effect: 'drop',
            mask: '#789'
        });
    });
</script>
<script>

    // create custom animation algorithm for jQuery called "drop"
    $.easing.drop = function(x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
    };


    // loading animation
    $.tools.overlay.addEffect("drop", function(css, done) {

        // use Overlay API to gain access to crucial elements
        var conf = this.getConf(),
       overlay = this.getOverlay();

        // determine initial position for the overlay
        if (conf.fixed) {
            css.position = 'fixed';
        } else {
            css.top += $(window).scrollTop();
            css.left += $(window).scrollLeft();
            css.position = 'absolute';
        }

        // position the overlay and show it
        overlay.css(css).show();

        // begin animating with our custom easing
        overlay.animate({ top: '+=55', opacity: 1, width: '+=20' }, 400, 'drop', done);

        /* closing animation */
    }, function(done) {
        this.getOverlay().animate({ top: '-=55', opacity: 0, width: '-=20' }, 300, 'drop', function() {
            $(this).hide();
            done.call();
        });
    }
);

    $("img[rel]").overlay({
        effect: 'drop',
        mask: '#789'
    });
</script>

<div id="triggers">
	<div class="navi"></div>
	<a class="prev browse left"></a>

	<div class="scrollable" id="browsable">

	   <div class="items">
	      <div>
		<a href=""> <img src="<%=request.getContextPath()%>/images/movies/movie1.jpg" rel="#mies1" /> </a>
	      </div>
	      <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie3.jpg" rel="#mies3" /> </a>
	      </div>
	      <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie4.jpg" rel="#mies4" /> </a>
	      </div>
              <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie5.jpg" rel="#mies5" /> </a>
	      </div>
	      <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie6.jpg" rel="#mies6" /> </a>
	      </div>
              <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie7.jpg" rel="#mies7" /> </a>
	      </div>
              <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie8.jpg" rel="#mies8"/> </a>
	      </div>
	      <div>
		<a href="">  <img src="<%=request.getContextPath()%>/images/movies/movie9.jpg" rel="#mies9" /> </a>
	      </div>
            </div>
	</div>



	<a class="next browse right"></a>
   </div>




<!-- overlays -->
<div class="simple_overlay" id="mies1">
	<img src="<%=request.getContextPath()%>/images/movies/movie1_big.jpg" />

	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. It was an important building in the history of modern architecture.
		</p>

		<p>
			Several critics, historians and modernists have declared it "the most beautiful building of the century"
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies2">
	<img src="<%=request.getContextPath()%>/images/movies/movie_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies3">
	<img src="<%=request.getContextPath()%>/images/movies/movie3_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies4">
	<img src="<%=request.getContextPath()%>/images/movies/movie4_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies5">
	<img src="<%=request.getContextPath()%>/images/movies/movie5_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies6">
	<img src="<%=request.getContextPath()%>/images/movies/movie6_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies7">
	<img src="<%=request.getContextPath()%>/images/movies/movie7_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies8">
	<img src="<%=request.getContextPath()%>/images/movies/movie8_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

<div class="simple_overlay" id="mies9">
	<img src="<%=request.getContextPath()%>/images/movies/movie9_big.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.
		</p>
	</div>
</div>

